<template>
    <div class="table-class">
        <el-table
            :size="size"
            :style="{width: maxWidth ? tableWidth + 'px' : '100%'}"
            :data="tableData"
            :stripe="false"
            :border="false"
            :highlight-current-row="false"
            :header-cell-style="{backgroundColor: '#f5f7fa', color: '#595959'}"
            v-bind="config"
        >
            <el-table-column
                type="index"
                width="50"
                :label="tableIndex.label || ''"
                :align="tableIndex.align || 'center'"
                v-if="tableIndex.isShow"
            >
            </el-table-column>
            <el-table-column
                v-for="(column, columIndex) in columnData.filter(item =>
                    item.isShow ? item.isShow(customData) : true
                )"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.maxWidth"
                :min-width="column.width"
                :fixed="column.fixed || null"
                :align="column.align || 'center'"
                :sortable="column.sortable"
                :index="columIndex"
                :show-overflow-tooltip="column.text || column.overflowTooltip ? true : false"
            >
                <template slot-scope="{row, $index}">
                    <!-- 默认展示 -->
                    <span v-if="column.text">{{ row[column.prop] }}</span>
                    <!-- 操作按钮 -->
                    <span v-if="column.isOperation">
                        <el-button
                            :icon="operations.icon"
                            style="font-size: 16px"
                            :type="operations.type"
                            class="text-ellipsis"
                            v-for="(operations, index) in column.operation.filter(item =>
                                item.isShow ? item.isShow(row, $index) : false
                            )"
                            :key="index"
                            :disabled="operations.disabled ? operations.disabled(row, $index, customData) : false"
                            @click="handleClick(row, $index, operations.buttonClick)"
                            :style="`color: ${
                                operations.color ? operations.color(row, $index, customData) : ''
                            };padding: ${operations.type !== 'text' ? '5px' : ''};`"
                            size="small"
                        >
                            {{ operations.label }}
                        </el-button>
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'publicTable',
    props: {
        dataKey: String,
        // parent: {
        //   export: true,
        //   type: Object,
        //   default: null
        // },
        paging: {
            type: Number,
        },
        size: {
            type: String,
            default: 'medium',
        },
        tableIndex: {
            type: Number,
            default: 0,
        },
        tableData: {
            type: Array,
            default: () => {
                return [];
            },
        },
        info: {
            type: Object,
            default: () => {
                return {};
            },
        },
        columnData: {
            type: Array,
            default: () => {
                return [];
            },
        },
        config: {
            type: Object,
            default: () => {
                return {};
            },
        },
        isStep: {
            type: Boolean,
            default: true,
        },
        customData: {
            type: Object,
            default: () => {
                return {};
            },
        },
        header: {
            type: Object,
            default: () => {
                return {
                    show: true,
                    upload: true,
                    uploadClick: 'upload',
                };
            },
        },
        maxWidth: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        tableWidth() {
            const columnData = this.columnData.filter(item => (item.isShow ? item.isShow(this.customData) : true));
            let width = columnData.reduce((pre, current) => {
                pre = pre + Number(current.width);
                return pre;
            }, 0);
            width = width + this.columnData.length;
            return width;
        },
    },
    data() {
        return {
            loading: false,
        };
    },
    methods: {
        onClickPaging(val) {
            this.$emit('onClickPaging', val);
        },
        getDicLabel(value, dicKey) {
            if (value) {
                const item = this.getDicitem(dicKey).filter(item => item.value === value);
                return item && item[0] && item[0].label;
            }
        },
        handleClick(row, index, buttonClick, prop, btn) {
            try {
                /**
                 * @param {*} row 当前行数据
                 * @param {*} prop 当前列的prop
                 */
                this.$parent[buttonClick](row, prop);
            } catch (error) {
                console.log('失败');
            }
        },
    },
    mounted() {
    },
};
</script>

<style lang="scss" scoped>
.table-class {
    overflow: auto;
    :deep(.el-table) {
        background-color: transparent !important;
        .el-table__cell {
            background-color: transparent !important;
        }
        .el-table__row {
            border: 0;
            background-color: transparent !important; /* 默认背景色 */
        }
        .el-table__row:hover {
            background: linear-gradient(90deg, rgba(22, 52, 93, 0) 0%, #214579 51%, rgba(36, 81, 144, 0) 100%);
            border: 2px solid #fff;
            border-image: linear-gradient(90deg, rgba(93, 144, 194, 0), rgba(93, 144, 194, 1), rgba(93, 144, 194, 0)) 22;
        }
    }
}

/* 表格内背景颜色 */
::v-deep .el-table {
    border: 0;
}
::v-deep .el-table tr,
::v-deep .el-table td,
::v-deep .el-table th {
    background-color: transparent !important;
    // border: 1px solid red;
    border: 0;
    color: #fff !important;
    font-size: 12px;
    font-weight: 300;
}
::v-deep .el-table th {
    background: linear-gradient(#1c3b68 0%, rgba(47, 61, 82, 0.09) 100%);
    border-radius: 0px 0px 0px 0px;
}
/* 去除底部白线 */
.el-table::before {
    background-color: transparent;
    border: 0;
}
/* //删除表头下横线 */
::v-deep .el-table th.el-table__cell {
    border: 0;
    background-color: transparent !important;
}
/* 滚动条轨道 */
::v-deep ::-webkit-scrollbar-track {
    // border: 1px solid red;
    // background-color: transparent; /* 滚动条轨道透明 */
}

/* Webkit 浏览器 */
::v-deep ::-webkit-scrollbar {
    // width: 80px;
    // background: red;
    // background-color: transparent;
}
::v-deep ::-webkit-scrollbar-thumb {
    // background: black;
    // background-color: transparent;
}
::v-deep ::-webkit-scrollbar-track {
    // background-color: transparent;
}

.text-ellipsis {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
<style scoped>
.el-form-item {
    /* 校验报错 */
    margin-bottom: 18px;
}

.el-form-item .el-form-item__error {
    width: 100% !important;
    text-align: center;
}
.tooltip-cell {
    padding: 0;
    line-height: 20px;
    /* border: 1px solid red; */
}
.table-class >>> .el-table {
    overflow: auto;
}
/* 滚动条轨迹 */
.table-class >>> .el-table::-webkit-scrollbar {
    width: 4px; /* 设置滚动条的宽度 */
    height: 12px; /* 设置水平滚动条的高度（如果需要） */
}

/* 滚动条滑块 */
.table-class >>> .el-table::-webkit-scrollbar-thumb {
    background-color: #395ee2; /* 滑块的颜色 */
    border-radius: 2px; /* 滑块的圆角 */
}

/* 滚动条滑块在悬停时的颜色 */
.table-class >>> .el-table::-webkit-scrollbar-thumb:hover {
    background-color: #000000; /* 悬停时的颜色 */
}

/* 滚动条轨迹 */
.table-class >>> .el-table::-webkit-scrollbar-track {
    background-color: #000000; /* 轨迹的颜色 */
    border-radius: 6px; /* 轨迹的圆角 */
}
</style>
